<template>
  <div class="tabel_Background">
    <div class="tabel_Background-wra">
      <div id="title">
        <span class="title-text">{{ title }}</span>
      </div>
      <div
        class="container"
        ref="usage_ref"
        style="width: 100%;height: 80%;"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StableDepth",
  data() {
    return {
      chartInstance: null,
      allData: null
    };
  },
  mounted() {
    this.initChart();
    this.getData();
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.usage_ref);
    },
    getData() {
      //服务器的数据请求位置

      // this.allData = ret
      this.updateChart();
    },
    updateChart() {
      const option = {
        tooltip: {
          trigger: "item",
          formatter: function(data) {
            console.log(data);
            return (
              data.seriesName +
              "<br/>" +
              data.name +
              " : " +
              data.value +
              " (" +
              data.percent.toFixed(1) +
              "%)"
            );
          }
        },

        legend: {
          orient: "vertical",
          right: 10,
          top: "bottom",
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "射孔层位",
            type: "pie",
            radius: ["45%", "70%"],
            label: {
              normal: {
                formatter: "{d}%"
              }
            },
            data: [
              {
                value: 1048,
                name: "1~10层",
                itemStyle: {
                  color: "#e8b601"
                },
                label: {
                  color: "#e8b601"
                }
              },
              {
                value: 735,
                name: "11~20层",
                itemStyle: {
                  color: "#0A8CFF"
                },
                label: {
                  color: "#0A8CFF"
                }
              },
              {
                value: 580,
                name: "20层以上",
                itemStyle: {
                  color: "#90D578"
                },
                label: {
                  color: "#90D578"
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      this.chartInstance.setOption(option);
    }
  },
  props: {
    title: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  width: 100%;
  height: 90%;
}

.tabel_Background {
  margin-top: 2%;
  width: 100%; //3.02rem;
  min-width: 2.96rem;
  height: 50%;
  box-sizing: border-box;
}

.tabel_Background-wra {
  width: 100%; //3.02rem;
  min-width: 2.96rem;
  height: 100%;
  // border: 1px solid rgb(12, 50, 107);
  background-image: url("../../assets/Panel@2x.png");
  // background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
  background-repeat: no-repeat;
  background-size: 100% 100%; // contain; // cover;
  padding: 2%;
  box-sizing: border-box;
}

#title {
  width: 40%;
  height: 10%;
  text-align: center;
  font-size: 6px;
  background-image: url("../../assets/title_outline@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; //cover;
  position: relative;
}

.title-text {
  position: absolute;
  left: 5%;
  top: 17%;
  color: #21beeb;
  font-weight: bold;
}
</style>
